 .container {
     display: grid;
     height: 100vh;
     margin: -10px;
     grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
     grid-template-rows: 0.2fr 0.1fr 1fr 0.1fr 0.1fr 0.1fr;
     grid-template-areas:
         "header header header header"
         "sidebar nav nav adds"
         "sidebar main1 main2 adds"
         "sidebar footnotes footnotes adds"
         "sidebar nav2 nav2 adds"
         "sidebar footer footer adds"

 }

 header {
     background: #947243;
     margin: -7px;
     grid-area: header;
     
 }




 nav {
     background: #e9e1d6;
     padding-top: 20px;
     padding-bottom: 20px;
     grid-area: nav;
 }

 #sidebar {
     background: #B1AF7B;
     grid-area: sidebar;
 }

 #adds {
     background: #B1AF7B;
     grid-area: adds;
     margin-right: -7px;
 }

 #main1 {
     background: #e9e1d6;
     grid-area: main1;
     padding-top: 30px;
     padding-right: 30px;
     padding-bottom: 30px;
     padding-left: 30px;

 }

 #main2 {
     background: #e9e1d6;
     grid-area: main2;
     padding-top: 30px;
     padding-right: 30px;
     padding-bottom: 30px;
     padding-left: 30px;
 }

 #footnotes {
     background: #e9e1d6;
     grid-area: footnotes;
 }

 nav2 {
     background: #e9e1d6;
     padding-top: 20px;
     padding-bottom: 20px;
     grid-area: nav2;
 }

 footer {
     background: #947243;
     grid-area: footer;
     padding-top: 30px;
     padding-right: 30px;
     padding-bottom: 30px;
     padding-left: 30px;
 }










 h1 {
     text-align: center;
     color: black;
     font-size: 33pt;
     line-height: 20%;
     margin-top: 55px;
     font-weight: 500;
 }

 h2 {
     text-align: center;
     color: black;
     font-size: 21pt;
     line-height: 0%;
     margin-bottom: 20px;
     font-weight: 500;
 }

 h3 {
     text-align: center;
     color: black;
     font-size: 17pt;
     line-height: 100%;
     margin-top: 10px;
     margin-bottom: 7px;
     font-weight: 500;
 }

 h4 {
     text-align: center;
     color: black;
     font-size: 21pt;
     line-height: 100%;
     font-weight: 500;
 }

 h5 {
     text-align: center;
     color: black;
     font-size: 15pt;
     line-height: 100%;
     margin-top: 7px;
     margin-bottom: 7px;
     font-weight: 500;
 }

 h6 {
     text-align: center;
     color: black;
     font-size: 15pt;
     line-height: 100%;
     margin-top: 7px;
     margin-bottom: 7px;
     font-weight: 500;
 }

 h7 {
     text-align: left;
     color: black;
     font-size: 1.4em;
 }

 h8 {
     text-align: left;
     color: black;
     font-size: 1.2em;
 }

 h9 {
     text-align: left;
     color: black;
     font-size: 1.0em;
 }

 h10 {
     text-align: left;
     color: black;
     font-size: 0.8em;
 }

 @media only screen and (max-width:1304px) {
     .container {
         grid-template-columns: 1.3fr 1.3fr;
         grid-template-rows: 0.4fr 0.4fr 2.2fr 0.5fr 0.4fr 3.7fr 0.2fr;
         grid-template-areas:
             "header header"
             "nav nav"
             "main1 main2"
             "footnotes footnotes"
             "nav2 nav2"
             "sidebar adds"
             "footer footer";
     }




 }


 @media only screen and (max-width:880px) {
     .container {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 0.4fr 0.4fr 2.2fr 2.2fr 0.5fr 0.4fr 2.2fr .2fr;
         grid-template-areas:
             "header header"
             "nav nav"
             "main1 main1"
             "main2 main2"
             "footnotes footnotes"
             "nav2 nav2"
             "sidebar adds"
             "footer footer";
     }


 }

 
 
 
 
 
 
 
 
 
 
 
 
 
 


 

 
 
 
 
 
 
 
 
 
 
 
 
 
 


 










